<template>
  <div class="box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="- 没有更多电影了 -"
      @load="onLoad"
    >
      <van-card
        v-for="item in list"
        :key="item.filmId"
        @click="goto(item.filmId)"
      >
        <template #title>
          <div class="title">
            {{ item.name }}<span>{{ item.item.name }}</span>
          </div>
          <div class="info">
            观众评分 <span class="pingfen">{{ item.grade }}</span>
          </div>
          <div class="info actors">主演：{{ item.actors | actors }}</div>
          <div class="info">{{ item.nation }} | {{ item.runtime }}分钟</div>
        </template>
        <template #thumb class="pic">
          <img :src="item.poster" alt="" />
        </template>
        <template #tags>
          <van-tag plain type="danger" class="sell" size="large" color="#ff5f16"
            >购票</van-tag
          >
        </template>
      </van-card>
    </van-list>
  </div>
</template>
<script>
import api from '@/api/index.js'
import Vue from 'vue'
import { Card, Tag, Button, List } from 'vant'

Vue.use(Card)
Vue.use(Tag)
Vue.use(Button)
Vue.use(List)
export default {
  data() {
    return {
      date: '',
      // show: false,
      list: [],
      loading: false,
      finished: false,
      pageNum: 1
    }
  },
  filters: {
    actors: function (val) {
      if (val) {
        const arr = val.map((item) => item.name)
        return arr.join(' ')
      } else {
        return '暂无主演'
      }
    }
  },
  methods: {
    onLoad() {
      // 当页面中的组件加载，就会执行一次，以后只要数据到底了，就会再次触发
      // 将请求移动到方法中
      this.$http
        .get(api.getPlaying + '?pageNum=' + this.pageNum)
        .then((res) => {
          // console.log(res)
          // 将请求回来的数据赋给data中的数据，方法遍历
          // this.list.push(...res.data.films)
          // this.pageNum++
          // this.loading = false

          if (res.status === 0 && res.msg === 'ok') {
            if (this.list.length < res.data.total) {
              this.pageNum++
              this.list.push(...res.data.films)
            } else {
              this.finished = true
            }
            this.loading = false
          }
        })
    },
    goto(id) {
      this.$router.push({
        path: '/movie/detail',
        query: {
          id
        }
      })
    }
  },
  created() {
    // 请求数据
    // this.$http.get(api.getPlaying).then((res) => {
    //   console.log(res)
    //   this.list = res.data.films
    // })
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding-bottom: 50px;
}
.van-card__thumb {
  width: 66px;
}
img {
  width: 66px;
}
.sell {
  position: absolute;
  right: 0;
  bottom: 33px;
}
.title {
  color: #191a1b;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  margin-top: 10px;
  span {
    font-size: 9px;
    color: #fff;
    background-color: #d2d6dc;
    height: 14px;
    line-height: 14px;
    padding: 0 2px;
    border-radius: 2px;
    margin-left: 5px;
    position: relative;
    top: -2px;
  }
}
.info {
  font-size: 13px;
  margin-top: 4px;
  color: #797d82;
  span {
    color: #ffb232;
    font-size: 14px;
  }
}
.actors {
  width: 173px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>